<template>
  <nav class="nav-x">
    <div class="nav-item"
      v-for="nav in navList"
      :key="nav.path"
      @click="skip(nav)"
    >
      {{nav.meta.title}}
    </div>
  </nav>
</template>

<script>
export default {
  name: 'RootNav',
  computed: {
    navList() {
      return this.$router.options.routes
    }
  },
  methods: {
    skip(nav) {
      if (nav.path !== this.$route.path) {
        this.$router.push(nav.path)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.nav-x {
  height: 100%;
  min-width: 180px;
  overflow-y: auto;
  box-sizing: border-box;
  border-right: 1px solid #ccc;
}
.nav-item {
  box-sizing: border-box;
  padding: 2px 10px;
  cursor: pointer;
}
</style>